<template>
  <div class="bank_box" :style="{ height: appHeight-100 + 'px' }">
    <div class="bank_list">
      <div :class="`flex align_center space_between bank_list_item ${index === 0 ? 'active' : ''}`"
        v-for="(item, index) in myBankList" :key="index">
        <div class="flex align_center list_item_l">
          <ImgT :src="`/imgs/bankIcon/bank_logo_${item.bank_id}.webp`" />
        </div>
        <div class="list_item_c">
          <div class="list_item_c_top txt_ellipsis">
            {{ item.bank_name }}
          </div>
          <div class="list_item_c_top txt_ellipsis">
            {{ myBankName }}
          </div>
          <div class="list_item_c_bottom txt_ellipsis">
            {{ item.account_number }}
          </div>
        </div>
        <div class="flex align_center f_wrap list_item_r">
          <span v-if="index === 0" class="flex align_center justify_center"> {{ t('paymentManagement_page_default_bank')
            }} </span>
          <template v-else>
            <span class="flex align_center justify_center sh_color" @click="removeBank(item)"> {{
              t('paymentManagement_page_delete') }} </span>
            <span class="button_color flex align_center justify_center mr_color" @click="doDefaultBank(item)"> {{
              t('paymentManagement_page_set_default') }} </span>
          </template>
        </div>
      </div>

      <div v-if="myBankList?.length < 6 && showAddBtn" class="flex f_wrap align_center justify_center bank_list_item add_bank"
        @click="openAddBank">
        <div class="add_icon">
          <iconpark-icon icon-id="add-f4melk13" size="1.5rem"></iconpark-icon>
        </div>
        <div>{{ t('paymentManagement_page_new_bank') }}</div>
      </div>

      <div v-if="showAddBtn" class="flex align_center bottom_tip">
        <span class="gth-icon">
          <iconpark-icon icon-id="red" size=".875rem"></iconpark-icon>
        </span>
        {{ t('paymentManagement_page_max_bank', { num: myBankList?.length || 0 }) }}
      </div>
    </div>
    <!-- </scroll-view> -->
    <!-- 删除弹窗 -->
    <Modal v-model:visible="showDelBankRef" :title="t('paymentManagement_page_tips')">
      <div class="popup_body">
        <div class="form_card">
          <div class="form_container vertical">
            <div class="body vertical center">
              {{ operateType === 'del' ? t('paymentManagement_page_tipContent') :
                t('paymentManagement_page_set_xw_default') }}
            </div>
          </div>
        </div>
        <div class="submit_btn flex justify_center">
          <Btn :disabled="loading" height="44px" width="200px" @click="operateBank" class="submit">
            {{ t('home_page_confirm') }}</Btn>
        </div>
      </div>
    </Modal>
    <!-- 添加银行弹窗 -->
    <AddBank ref="addMyBankModal" v-if="showAddBankRef" @getMyBindBankList="getMyBankList" :myBankName="myBankName"
      :myBankList="myBankList" />

  </div>
</template>

<script setup lang="ts">
import { useI18n } from "vue-i18n";
import {onMounted, onUnmounted, ref, watch} from "vue";
import { MessageEvent2 } from "@/net/MessageEvent2";
import { NetMsgType } from "@/netBase/NetMsgType";
// import { Net } from "@/net/Net";
import H5Websocket from "@/net/Net1";
import { NetPacket } from "@/netBase/NetPacket";
import { showToast } from "@nutui/nutui";
import Modal from "@/components/Modal.vue";
import Btn from "@/components/Btn.vue";
import AddBank from './AddBank.vue';
import {storeToRefs} from "pinia";
import {User} from "@/store/user.ts";
import pinia from "@/store";

const { t } = useI18n();
const { appHeight, bankCardInfoList } = storeToRefs(User(pinia));
const addMyBankModal = ref();
const showDelBankRef = ref(false);
const showAddBankRef = ref(false);
const showAddBtn = ref(true);
const myBankList: any = ref([]);
const myBankName = ref(); // 如果有已经绑定的银行卡姓名，下次绑定需要一致
const loading = ref(false)
const curOperate = ref({}); // 当前操作的数据
const operateType = ref(); // 操作类型，del 删除，default 设为默认银行卡

// 获取已绑定的银行账号
const getMyBankList = () => {
  loading.value = true
  const req = NetPacket.req_bank_card_info_list();
  // Net.instance.sendRequest(req);
  H5Websocket.sendMessageHandler(req);
}
const handleMyBankList = (res: any) => {
  console.log('------99', res)
  showAddBtn.value = true // 显示添加地址按钮
  setTimeout(() => {
    loading.value = false
  }, 300)
  myBankName.value = res.cardholder_name || '';
  showAddBankRef.value = true;
  myBankList.value = res.bank_card_info_list.reverse();
}
// 删除银行
const removeBank = (item: any) => {
  operateType.value = 'del';
  showDelBankRef.value = true;
  curOperate.value = item;
  console.log(item);
};
const operateBank = (item: any) => {
  item = curOperate.value;
  loading.value = true
  let req;
  if (operateType.value === 'del') { // 删除
    req = NetPacket.req_del_bank_card_info();
  } else { // 设为默认银行卡
    req = NetPacket.req_set_default_bankcard();
  }
  req.bankcard = `${item.bank_id}_${item.account_number}`;
  // Net.instance.sendRequest(req);
  H5Websocket.sendMessageHandler(req);
}
const handleDelBankList = (res: any) => {
  loading.value = false;
  showDelBankRef.value = false
  if (res.result === 0) {
    showToast.success(t('proxy_page_caoZuo'))
    getMyBankList();
  } else {
    showToast.fail(t('proxy_page_caoZuoFail'))
  }
}
// 设置默认银行
const doDefaultBank = (item: any) => {
  operateType.value = 'default';
  showDelBankRef.value = true;
  curOperate.value = item;
};
// 设置默认银行
const handleDefaultBank = (res: any) => {
  loading.value = false;
  showDelBankRef.value = false
  if (res.rlt === 0) {
    showToast.success(t('proxy_page_caoZuo'))
    getMyBankList();
  } else {
    showToast.fail(t('proxy_page_caoZuoFail'))
  }
}

// 银行卡，显示前3位和后4位
// const maskString = (str: any) => {
//   if (str.length <= 7) {
//     return str.replace(/./g, "***");
//   }
//   return str.substr(0, 3) + "**** ****" + str.substr(-4);
// }
// 真实姓名显示
// const maskNameString = (str: any) => {
//   return str.substr(0, 1) + "**";
// }

// 打开添加银行弹窗
const openAddBank = () => {
  showAddBtn.value = false;
  addMyBankModal.value.showAddBankModal();
}
watch(
    () => bankCardInfoList.value,
    (n) => {
      handleMyBankList(n)
      console.log('==提现列表', n)
    }
);
onMounted(() => {
  setTimeout(() => {
    getMyBankList();
    // MessageEvent2.addMsgEvent(NetMsgType.msgType.msg_notify_bank_card_info_list, handleMyBankList);
    MessageEvent2.addMsgEvent(NetMsgType.msgType.msg_notify_del_bank_card_info, handleDelBankList);
    MessageEvent2.addMsgEvent(NetMsgType.msgType.msg_notify_set_default_bankcard, handleDefaultBank);
  }, 500)
});
onUnmounted(() => {
  // 取消监听
  // MessageEvent2.removeMsgEvent(NetMsgType.msgType.msg_notify_bank_card_info_list, null);
  MessageEvent2.removeMsgEvent(NetMsgType.msgType.msg_notify_del_bank_card_info, null);
  MessageEvent2.removeMsgEvent(NetMsgType.msgType.msg_notify_set_default_bankcard, null);
});


</script>

<style scoped lang="scss">
.flex {
  display: flex;
}

.space_between {
  justify-content: space-between;
}

.justify_center {
  justify-content: center;
}

.align_center {
  align-items: center;
}

.f_wrap {
  flex-wrap: wrap;
}

.bank_box {
  font-size: 12px;
  padding: 20px 14px 30px;
  min-height: 80px;
  overflow-y: auto;

  .bank_list {
    //background: #100E26;
    //border: 1px solid #2E296B;
    //border-radius: 12px;
    //padding: 16px 12px;

    .bank_list_item {
      position: relative;
      height: 76px;
      padding: 14px;
      margin-bottom: 14px;
      border-radius: 6px;
      background: #1D1C3C;
      border: 1px solid #333260;

      &::after {
        content: '';
        position: absolute;
        width: 88px;
        height: 33px;
        background: url(/imgs/payment/icon_bank.webp) center no-repeat;
        background-size: 100%;
        right: 3px;
        bottom: 5px;
      }
      /*默认卡片*/
      &.active {
        border: 2px solid #0CC41E;
      }

      .list_item_l {
        position: relative;
        width: 48px;
        height: 48px;
        border-radius: 50%;
        padding: 12px 6px 13px;
        border: solid 3px #d6cdff;
        background-color: #fff;
        &::after {
          content: '';
          position: absolute;
          width: 1px;
          height: 48px;
          background: rgba(168, 168, 202, 0.2);
          right: -17px;
        }
        img {
          width: 36px;
          max-width: 45px;
        }
      }

      .list_item_c {
        width: 170px;
        color: #fff;
        margin-left: 15px;

        .list_item_c_top {
          font-size: 12px;
        }
        .list_item_c_bottom {
          margin-top: 5px;
          font-size: 16px;
          font-weight: 600;
        }
      }

      .list_item_r {
        width: 66px;
        color: #fff;
        position: relative;
        z-index: 5;

        span {
          font-size: 2.8vw;
          width: 100%;
          height: 20px;
          border-radius: 4px;
          background-color: #131232;

          &:first-child {
            margin-bottom: 8px;
          }

          &.sh_color {
            background: #0cc41e;
          }
        }

      }

      &.add_bank {
        &::after {
          background: none;
        }
        >div {
          width: 100%;
          color: #fff;
          text-align: center;
        }

        .add_icon {
          margin-bottom: 10px;
          width: 24px;
          height: 24px;
        }
      }

    }

    .bottom_tip {
      font-size: 12px;
      color: #E43939;

      .gth-icon {
        margin-right: 4px;
        width: 14px;
        height: 14px;
      }
    }

  }

}

.popup_body {
  .body {
    font-size: 14px;
    color: #fff;
    text-align: center;
    padding: 30px;
  }
}
</style>
